<template>
  <div class="form-container">
    <el-card>
      <template #header> 基础表单 </template>
      <easy-form
        :fieldList="fieldList"
        :model="model"
        :options="{ labelWidth: 100, showResetButton: true }"
        @submit="handleBaseSubmit"
      />
    </el-card>
  </div>
</template>

<script setup>
import EasyForm from "./components/EasyForm.vue";
const model = ref({
  name: "张三",
  gender: 1,
  hobbies: [1],
  job: 3,
  readonly: "只读输入框",
  summary: "尤雨溪懂个锤子vue是什么梗",
});

const fieldList = ref([
  { label: "姓名", field: "name", disabled: true },
  {
    label: "性别",
    field: "gender",
    type: "radio",
    options: {
      data: [
        { label: "男", value: 1 },
        { label: "女", value: 0 },
      ],
    },
  },
  {
    label: "爱好",
    field: "hobbies",
    type: "checkbox",
    options: {
      data: [
        { label: "吃饭", value: 1 },
        { label: "睡觉", value: 2 },
        { label: "写代码", value: 3 },
      ],
    },
  },
  {
    label: "工作",
    field: "job",
    type: "select",
    options: {
      data: [
        { label: "吃饭", value: 1 },
        { label: "睡觉", value: 2 },
        { label: "写代码", value: 3 },
      ],
    },
  },
  {
    label: "密码",
    field: "password",
    type: "password",
    placeholder: "这是一个密码输入框",
  },
  {
    label: "只读",
    field: "readonly",
    readonly: true,
    placeholder: "这是一个只读输入框",
  },
  {
    label: "留言板",
    field: "summary",
    type: "textarea",
    placeholder: "留言板",
  },
]);
const handleBaseSubmit = (model) => {
  console.log(model);
};
</script>

<style lang="scss" scoped>
.form-container {
  position: relative;
  padding: 20px;
}
</style>
